<template>
  <div id="picture">
    <br>
    <br>
    <img id="img" :src="images[number]" width="100%">
  </div>
</template>

<script>
 import {selectImgs} from '@/api/user'

 export default {
    name: 'HomePictures',
    data() {
      return {
        number: 1,
        images: [
        ],
      };
    },
    methods:{
      changeImg(){
        this.number++;
        if (this.number==this.images.length){
          this.number=0;
        }
      },
      setTimer() {
        if(this.timer == null) {
          this.timer = setInterval( () => {
            this.changeImg();
          }, 3000)
        }
      },
      selectPictures(){
        selectImgs().then(res=>{
          this.images=res.data.data;
        })
      }
    },
    created: function() {
      // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
      clearInterval(this.timer)
      this.timer = null
      this.setTimer();
      //查询5个图片路径作为轮播图图片
      this.selectPictures();
    },
    destroyed: function () {
      // 每次离开当前界面时，清除定时器
      clearInterval(this.timer)
      this.timer = null
    },
  }
</script>
<style scoped>
</style>
